<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>辅导员管理</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f6fa;
            padding: 20px;
            margin: 0;
        }

        .form-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        #formTitle {
            color: #2c3e50;
            font-size: 24px;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
            text-align: center;
        }

        .form-group {
            margin-bottom: 25px;
        }

        label {
            display: block;
            color: #34495e;
            margin-bottom: 8px;
            font-weight: 500;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52,152,219,0.3);
            outline: none;
        }

        .btn-container {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            flex: 1;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #7f8c8d;
        }

        .loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            display: none;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h2 id="formTitle">添加辅导员</h2>

    <div id="alertSuccess" class="alert alert-success"></div>
    <div id="alertError" class="alert alert-error"></div>

    <form id="instructorForm">
        <input type="hidden" id="instID" name="instID">

        <div class="form-group">
            <label for="instName">姓名:</label>
            <input type="text" id="instName" name="instName" required placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label for="depID">部门ID:</label>
            <input type="text" id="depID" name="depID" required placeholder="请输入部门ID">
        </div>

        <div class="form-group">
            <label for="telephone">电话:</label>
            <input type="text" id="telephone" name="telephone" required
                   pattern="[0-9]{11}" placeholder="请输入11位手机号码">
        </div>

        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">
        </div>

        <div class="btn-container">
            <button type="button" class="btn btn-secondary" onclick="window.location.href='CM04_instructorList.jsp'">返回列表</button>
            <button type="button" class="btn btn-primary" id="submitBtn" onclick="submitForm()">提交</button>
        </div>
    </form>
</div>

<script>
    // 检查 URL 是否携带 instID 参数
    const params = new URLSearchParams(window.location.search);
    const instID = params.get("instID");

    // 如果有 ID 参数，则加载现有数据
    if (instID) {
        document.getElementById("formTitle").innerText = "编辑辅导员";
        console.log(instID)
        axios.get(`/api/instructors/instID/` +instID)
            .then(response => {
                if (response.data.code === 1) {
                    const inst = response.data.data;
                    $('#instID').val(inst.instID);//隐藏
                    $('#instName').val(inst.instName);
                    $('#depID').val(inst.depID);
                    $('#telephone').val(inst.telephone);
                    $('#password').val(inst.password);

                } else {
                    alert("未找到该辅导员信息");
                    window.location.href = 'CM04_instructorList.jsp';
                }
            })
            .catch(error => {
                console.error("加载辅导员信息失败:", error);
                alert("加载失败，请稍后重试");
                window.location.href = 'CM04_instructorList.jsp';
            });
    }


    // 提交表单
    function submitForm() {
        const instID = $('#instID').val();
        const instName = $('#instName').val().trim();
        const depID = $('#depID').val().trim();
        const telephone = $('#telephone').val().trim();
        const password = $('#password').val().trim();

        if (!instName || !depID || !telephone || !password) {
            alert("请完整填写表单内容");
            return;
        }

        const payload = {
            instID: instID || null,
            instName: instName,
            depID: depID,
            telephone: telephone,
            password: password
        };

        const request = instID
            ? axios.put('/api/instructors/update', payload) // 编辑
            : axios.post('/api/instructors/add', payload); // 添加

        request.then(response => {
            if (response.data.code === 1) {
                alert(response.data.message);
                window.location.href = 'CM04_instructorList.jsp';
            } else {
                alert(response.data.message || "操作失败");
            }
        }).catch(error => {
            console.error("提交表单出错:", error);
            alert("提交失败，请稍后重试");
        });
    }
</script>
</body>
</html>
